HTMLify

style.css
Views: 32 | Author: cody
* {
    box-sizing: border-box;
}

html,
body {
    background-color: #000;
    color: white;
}

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

.container {
    --size: 200px;
    color: rgb(239, 243, 244);
    position: relative;
    width: var(--size);
    height: var(--size);
}

.container * {
    position: absolute;
    border-style: solid;
}

.border1 {
    border-width: 13.5px;
    top: 0;
    left: calc(50% - 29px);
    width: 56px;
    transform: skew(35deg);
    height: 200px;
}

.border2,
.border3 {
    width: 0;
    border-width: 8px;
    height: 90px;
    transform: skew(-41deg);
    background-color: currentColor;
}

.border2 {
    top: 0;
    left: calc(50% + 37px);
    border-bottom-left-radius: 20px;
}

.border3 {
    left: calc(50% - 61px);
    bottom: 0;
    border-top-right-radius: 8px;
}

.small {
    --size: 80px;
}

Comments